<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<%@ include file="/common/taglibs.jsp"%>
	<title>组织架构管理</title>
	<%@ include file="/common/meta.jsp"%>
	<link href="${ctx}/assets/plugins/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
	<link href="${ctx}/assets/css/jsTree/style.min.css" rel="stylesheet" type="text/css" />
	<link href="${ctx}/assets/plugins/select2/select2.css" rel="stylesheet" />
	<link rel="stylesheet" href="${ctx}/assets/ztree/css/selectTree.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/assets/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
	
	<!-- begin #page-loader -->
	<div id="page-loader" class="fade in"><span class="spinner"></span></div>
	<!-- end #page-loader -->

    <div id="page-container" class="fade page-sidebar-fixed page-header-fixed">
	
		<%@ include file="/common/header.jsp"%>
		<%@ include file="/common/slider.jsp"%>
		<div id="content" class="content">
		    <!-- BEGIN CONTENT HEADER-->
		    <ol class="breadcrumb pull-right">
				<li><a href="javascript:;"><fmt:message key="sys.healthcervix"/></a></li>
				<li><a href="javascript:;">账号管理</a></li>
				<li class="active">组织架构管理</li>
			</ol>
			<h1 class="page-header">
				组织架构管理  <!-- <small><fmt:message key="sys.healthcervix"/></small> -->
			</h1>
			
			<div class="row">
				<div class="col-md-3">
					<div class="panel panel-inverse">
						<div class="panel-heading">
							<div class="panel-heading-btn">
	                        	<a href="javascript:;" id="tree_2_collapse" class="btn btn-xs btn-success">收起</a>
								<a href="javascript:;" id="tree_2_expand" class="btn btn-xs btn-success">展开</a>
	                        </div>
							<h4 class="panel-title">组织架构管理</h4>				
						</div>
						<div class="panel-body">
							<div id="tree_2" class="tree-demo">
							</div>
						</div>
					</div>
				</div>
				<!-- begin col-12 -->
				<div class="col-md-9">
					<!-- begin panel -->
					<div class="panel panel-inverse">
						<div class="panel-heading">					
							<h4 class="panel-title">组织架构列表</h4>
						</div>
						<div class="panel-body">
	                        <p>
	                       		<a id="addBtn" name="addBtn" href="javascript:;" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i>新增组织架构</a>               		
							</p>
							<table id="SysOfficeListTable" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th>机构名称</th>
										<th>联系人</th>
										<th>联系电话</th>
										<th>联系邮箱</th>
										<th>管理区域</th>
										<th>排序</th>
										<th><fmt:message key="public.list.operation"/></th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>
					<!-- end panel -->
				</div>
				<!-- end col-12 -->
			</div>
			
			<div class="modal fade" id="editDlg" name="editDlg">
				<div class="modal-dialog">
					<form id="actForm" name="actForm" action="#" class="form-horizontal">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
								<h4 class="modal-title"></h4>
							</div>
							<div class="modal-body">
							    <input type="hidden" name="id" id="id"/>
								<input type="hidden" name="parentId" id="parentId"/>
								<input type="hidden" name="type" id="type" value="1"/>
								<div class="form-group" id="parentDiv" name="parentDiv">
						            <label class="col-md-3 control-label ui-sortable">上级机构<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						 				<input type="text" name="parentName" id="parentName" class="form-control" placeholder="请输入上级机构"  style="width: 80%" disable/>
						   		 	</div>
						       	</div>							
								<div class="form-group">
						            <label class="col-md-3 control-label ui-sortable">机构名称<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						 				<input type="text" name="name" id="name" class="form-control" placeholder="请输入机构名称" maxlength="50" style="width: 80%"/>
						   		 	</div>
						       	</div>
								<div class="form-group">
						            <label class="col-md-3 control-label ui-sortable">机构编号<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						 				<input type="text" name="code" id="code" class="form-control"  placeholder="请输入机构编号" maxlength="50" style="width: 80%"/>
						   		 	</div>
						       	</div>							
								<div class="form-group">
						            <label class="col-md-3 control-label ui-sortable">联系人<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						 				<input type="text" name="contactName" id="contactName" class="form-control" placeholder="请输入联系人" maxlength="50" style="width: 80%"/>
						   		 	</div>
						       	</div>
								<div class="form-group">
						            <label class="col-md-3 control-label ui-sortable">联系电话<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						 				<input type="text" name="contactPhone" id="contactPhone" class="form-control"  placeholder="请输入联系电话" maxlength="20"
						 				 onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();"
						 				style="width: 80%"/>
						   		 	</div>
						       	</div>
								<div class="form-group">
						            <label class="col-md-3 control-label ui-sortable">联系邮箱<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						 				<input type="text" name="contactEmail" id="contactEmail" class="form-control" placeholder="请输入联系邮箱" maxlength="100" style="width: 80%"/>
						   		 	</div>
						       	</div>
					            <div class="form-group">
						            <label class="col-md-3 control-label ui-sortable">管辖区域<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						                <input id="officeAreaIds" name="officeAreaIds" type="hidden"/>
										<input id="officeAreaNames" name="officeAreaNames" type="text" class="form-control" style="width: 80%" onclick="showMenu();" readonly />
										<div id="menuContent" class="menuContent" style="display:none;" >
									        <div class="row">
										        <div class="col-md-6">
												    <input type="text" id="searchAreaName" name="searchAreaName" class="form-control" placeholder="输入查询区域名称"/>
										        </div>
										        <div class="col-md-2">
								                    <button type="button" class="btn btn-sm btn-primary" id="checkAllFalse">取消勾选</button>
									            </div>
									         </div>
	                                        <ul id="tree_1" class="ztree" style="margin-top:0; width:80%; height: 300px;"></ul>
                                        </div>
						   		 	</div>
						       	</div>	
						       	<div class="form-group">
						            <label class="col-md-3 control-label ui-sortable">排序<span class="required">*</span></label>
						            <div class="col-md-9 ui-sortable">
						 				<input type="text" name="sort" id="sort" class="form-control"  placeholder="请输入排序" maxlength="10"
						 				onkeyup="(this.v=function(){this.value=this.value.replace(/[^1-9]+/,'');}).call(this)" onblur="this.v();"
						 				style="width: 80%"/>
						   		 	</div>
						       	</div>	
							</div>
							<div class="modal-footer-dialog">
								<a href="javascript:;" class="btn btn-sm btn-default" data-dismiss="modal"><fmt:message key="public.button_close"/></a>
								<button type="button" class="btn btn-sm btn-primary" id="actFormBtn"><fmt:message key="public.button_save"/></button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!-- END PAGE -->    
		
	</div>
	
	<%@ include file="/common/footer.jsp" %>
	<script src="${ctx}/assets/js/bootstrap-tree.js"></script>
	<script src="${ctx}/assets/js/jquery.dataTables.js"></script>
	<script src="${ctx}/assets/js/DT_bootstrap.js"></script>
	<script type="text/javascript" src="${ctx}/assets/ztree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="${ctx}/assets/ztree/js/jquery.ztree.excheck.js"></script>
	<script src="${ctx}/assets/plugins/select2/select2.min.js"></script>
	<script src="${ctx}/js/common/selecttree.js"></script>
	<script src="${ctx}/assets/js/jstree/dist/jstree.min.js"></script>
	<script src="${ctx}/assets/js/ui-tree.js"></script>
	<script type="text/javascript" src="${ctx}/js/sysOffice/list.js?v=${ver}"></script>
	<script type="text/javascript">
		jQuery(document).ready(function() {       
			SysOfficeManaged.init();
			$("#checkAllFalse").bind("click", {type:"checkAllFalse"}, checkNode);
		});
	</script>
</body>
<!-- END BODY -->
</html>